<template>
    <!-- 头部列表 -->
    <nav class="headerbar-menu active">
        <div class="headerbar-menu-item">
            <!-- 路由跳转首页 -->
            <router-link to="/Index">
                <i class="iconfont">&#xe62d;</i>
                <span>首页</span>
            </router-link>
        </div>
        <div class="headerbar-menu-item">
            <!-- 路由跳转分类搜索 -->
            <router-link to="/Classification">
                <i class="iconfont">&#xe66f;</i>
                <span>分类搜索</span>
            </router-link>
        </div>
        <div class="headerbar-menu-item">
            <!-- 路由跳转购物车 -->
            <router-link to="/Cart">
                <i class="iconfont">&#xe70b;</i>
                <span>购物车</span>
            </router-link>
        </div>
        <div class="headerbar-menu-item">
            <!-- 路由跳转我的 -->
            <router-link to="/My">
                <i class="iconfont">&#xe62f;</i>
                <span>我的</span>
            </router-link>
        </div>
    </nav>
</template>
<script>
export default{
    name : "headerlb",
}
</script>
<style lang="less" scoped>
.headerbar-menu{
    border:1px solid #E9ECF0;
    background-color:#fff;
    border-radius:0.2rem;
    box-shadow:0 4px 12px 0 #e9ecf0;
}
.headerbar-menu::before {
    content: "";
    position: absolute;
    top: -.12rem;
    right: 0.3rem;
    width: 0.2rem;
    height: 0.2rem;
    background:#fff;
    border-top: 1px solid #E9ECF0;
    border-left: 1px solid #E9ECF0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.active{
    position:absolute;
    top:1rem;
    background-color:#fff;
    right:.1rem;
}
.headerbar-menu-item{
    text-align:left;
    height:0.9rem;
}
.headerbar-menu-item a{
    padding:0 0.2rem;
    color:#232628;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.headerbar-menu-item a .iconfont{
    font-size:.5rem;
    vertical-align:middle;
}
.headerbar-menu-item a span{
    margin-left:.2rem;
}
</style>